<html>
    <head>
			<!-- Import style -->
			<link rel="stylesheet" href="/vendor/dcat-admin/dcat/plugins/element-plus/index.css" />
			<link rel="stylesheet" href="/vendor/dcat-admin/dcat/plugins/charts/apexcharts.css" />

			<!-- Import Vue 3 -->
			<script src="/vendor/dcat-admin/dcat/plugins/element-plus/vue.global.js"></script>
			<script src="/vendor/dcat-admin/dcat/plugins/element-plus/element-plus.js"></script>
      <script src="/vendor/dcat-admin/dcat/plugins/element-plus/axios.min.js"></script>
      <script src="/vendor/dcat-admin/dcat/plugins/element-plus/lodash.min.js"></script>
			<script src="/vendor/dcat-admin/dcat/plugins/charts/apexcharts.js"></script>
			

			<!-- Import component library -->
		</head>
    <body>
        <div id="app">
					@include('admin.partials.home_center')
					
					
					
    		</div>

        
<script>
const { createApp, ref, onMounted, reactive} = Vue
const { ElMessage } = ElementPlus
const baseUrl = '{{ admin_url("") }}'
const users = ref([])
const keyword = ref('')
const optionsUsers = ref([])
const optionsLoading = ref(false)
const loading = ref(false)
const ruleUserFormRef = ref()
const ruleBingshiFormRef = ref()
const ruleDanganFormRef = ref()
const userRules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
  ],
  school: [
    { required: true, message: '请输入学校', trigger: 'blur' },
  ],
  class_name: [
    { required: true, message: '请选择年级', trigger: 'blur' },
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'blur' },
  ],
  birthdate: [
    { required: true, message: '请选择出生年月', trigger: 'blur', type: 'date' },
  ],

})
const form = reactive({
	id: '',
	name: '',
	mobile: '',
	school: '',
	class_name: '',
	sex: '',
	birthdate: '',
	address: '',
	shop_id: '{{ session('shop_id') }}',
})
const formJson = JSON.stringify(form)
const listBingshi = ref([])
const listDangan = ref([])
const danganActiveName = ref('first')
const bingshiActiveName = ref('first')
const getUsers = (queryString) => {
  if(queryString.length < 1) return
  optionsLoading.value = true
  axios.get(baseUrl + '/api/user?q=' + queryString).then((res) => {
    users.value = res.data
    optionsUsers.value = res.data.data
    optionsLoading.value = false
  })
}
const selectUser = (value) => {
  if(typeof value == 'object') {
    var user = value
  }else{
    var user = _.find(optionsUsers.value, function(item){
      return item.id == value
    })
  }
  
  form.id = user.id
  form.name = user.name
  form.mobile = user.mobile
  form.school = user.school
  form.class_name = user.class_name
  form.sex = user.sex
  if(user.birthdate) {
    let arr = user.birthdate.split('-')
    form.birthdate = new Date(arr[0], arr[1] - 1, arr[2])
  }
  
  form.address = user.address
  form.shop_id = user.shop_id
  getAllData(user.id)
}
const saveUser = (formEl) => {
  if (!formEl) return false
  
  formEl.validate((valid, fields) => {
    if (valid) {
      axios.post(baseUrl + '/api/saveUser', form).then((res) => {
        if(res.data.code == 1){
          ElMessage({
            type: 'success',
            message: '保存成功'
          })
          form.id = res.data.user.id
          form.user_id = res.data.user.id
          getAllData(form.id)
        }else{
          ElMessage({
            type: 'error',
            message: '保存失败'
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
  
}

const dangAnOptions = reactive({
  shili: @json(\App\Admin\Repositories\Config::selectOptionsVision()),
  ds: @json(\App\Admin\Repositories\Config::selectOptionsKeyValues()),
  dc: @json(\App\Admin\Repositories\Config::selectOptionsKeyValues('cylinder')),
  a: @json(\App\Admin\Repositories\Config::getSelectOptionsNumber(0, 180)),
  yz: @json(\App\Admin\Repositories\Config::getSelectOptionsNumber(20, 28)),
  yz100: @json(\App\Admin\Repositories\Config::getSelectOptionsNumber(1, 99, true)),
  ql: @json(\App\Admin\Repositories\Config::getSelectOptionsNumber(39, 47)),
  yw: @json(\App\Admin\Repositories\Config::getSelectOptionsNumber(0, 30)),
  yd: @json(\App\Admin\Repositories\Config::selectOptions(pid: 539)),
  sj: @json(\App\Admin\Repositories\Config::selectOptions(pid: 479)),
  lt: @json(\App\Admin\Repositories\Config::selectOptions(pid: 542)),
  zx: @json(\App\Admin\Repositories\Config::selectOptions(pid: 548)),
  fx: @json(\App\Admin\Repositories\Config::selectOptions(pid: 553)),
  fl: @php echo json_encode(\App\Admin\Repositories\Config::getSelectOptionsNumber(0.5, 50, false, 0.5));@endphp,
  am: @json(\App\Admin\Repositories\Config::selectOptions(pid: 558)),
  gx: @json(\App\Admin\Repositories\Config::selectOptions(pid: 447)),
  sjxl: @json(\App\Admin\Repositories\Config::selectOptions(pid: 454)),
  xw: @json(\App\Admin\Repositories\Config::selectOptions(pid: 464)),
  
})
const dangAnForm = reactive({
  id: '',
  user_id: '',
  weight: '',
  height: '',
  shili_luoyan_left: '',
  shili_luoyan_right: '',
  shili_jiaozheng_left: '',
  shili_jiaozheng_right: '',
  yanguang_diannao_left: { ds: '', dc:'', a: ''},
  yanguang_diannao_right: { ds: '', dc:'', a: ''},
  yanguang_zonghe_left: { ds: '', dc:'', a: ''},
  yanguang_zonghe_right: { ds: '', dc:'', a: ''},
  jiujing_jiaodu_left: { ds: '', dc:'', a: ''},
  jiujing_jiaodu_right: { ds: '', dc:'', a: ''},
  yanzhu_left: '',
  yanzhu_right: '',
  yanzhu_right_100: '',
  yanzhu_left_100: '',
  qulv_left: '',
  qulv_right: '',
  yanwei_left: '',
  yanwei_right: '',
  yandi_left: '',
  yandi_right: '',
  sejue_right: '',
  sejue_left: '',
  duibidu_left: '',
  duibidu_right: '',
  shuangyan_liti_right: '',
  shuangyan_liti_left: '',
  shuangyan_fuxiang_left: '',
  shuangyan_fuxiang_right: '',
  shuangyan_tiaojie_left: '',
  shuangyan_tiaojie_right: '',
  shuangyan_zhengxiang_left: '', 
  shuangyan_zhengxiang_right: '',
  shuangyan_lingmindu_left: '',
  shuangyan_lingmindu_right: '',
  shuangyan_lingmindu: '',
  shuangyan_jusan_right: '',
  shuangyan_jusan_left: '',
  fangan_jiaozheng: [],
  fangan_xunlian: [],
  fangan_other: '',
  ganyu: [],
  fu_check_date: '',
  write_date: new Date(),
  wj: {
    zhenduan: {zhenduan1: [], other: '', xieshi: [], tiaojie: []},
    huyan: { huyan1: [], other: '' },
    shenghuo: {shangxue: '', shangxue1: '', fangjia: '', fangjia1: '', aoye: 0, aoye1: '', aoye2: '', shangwu: '', shangwu1: '', xiawu: '', xiawu1: '', peitong: [], huodongnei: '', rijunshichang: '', dancilianxu: '', xiuxifangshi: [], xiuxifangshi_other: '', fuzhugongju: [], peitong: [], zhaoming: []},
    dianzi: { dianshi: '', dianshi_neirong: '', dianshi_zishi: [], dianshi_mi: '', shouji_neirong: '', shouji: '', shouji_zishi: [], shouji_mi: '', shouji_xiuxi: '' },
    jiazhang: { hexin: [], other: '' },
    fudao_leixing: [],
    fudao_kewai: []
  }
})
const bingshiForm = reactive({
  id: '',
  user_id: '',
  zhusu: '',
  daijing: '',
  xiguan: '',
  kuangjia_date: '',
  xianyou_date: '',
  quguang_dpt: {
    left: { ds: '', dc:'', a: ''},
    right: { ds: '', dc:'', a: ''},
  },
  jiaomo_date: '',
  tingdai_date: '',
  other: '',
  jiwangshi: [],
  jiwangshi_other: '',
  fuqin: [],
  muqin: [],
  jiazu: '',
  chusheng: []
})
const bingshiOptions = reactive({
  jw: @json(\App\Admin\Repositories\Config::selectOptions(pid: 399)),
  fq: @json(\App\Admin\Repositories\Config::selectOptions(pid: 407)),
  cs: @json(\App\Admin\Repositories\Config::selectOptions(pid: 412)),
})
const wenjuanOptions = reactive({
  zd: @json(\App\Admin\Repositories\Config::selectOptions(pid: 425)),
  xs: @json(\App\Admin\Repositories\Config::selectOptions(pid: 433)),
  tj: @json(\App\Admin\Repositories\Config::selectOptions(pid: 477)),
  hy: @json(\App\Admin\Repositories\Config::selectOptions(pid: 515)),
  ay: @json(\App\Admin\Repositories\Config::selectOptions(pid: 483)),
  pt: @json(\App\Admin\Repositories\Config::selectOptions(pid: 487)),
  xx: @json(\App\Admin\Repositories\Config::selectOptions(pid: 492)),
  fz: @json(\App\Admin\Repositories\Config::selectOptions(pid: 497)),
  pt1: @json(\App\Admin\Repositories\Config::selectOptions(pid: 501)),
  zm: @json(\App\Admin\Repositories\Config::selectOptions(pid: 504)),
  ds: @json(\App\Admin\Repositories\Config::selectOptions(pid: 508)),
  hx: @json(\App\Admin\Repositories\Config::selectOptions(pid: 527)),
  fd: @json(\App\Admin\Repositories\Config::selectOptions(pid: 512)),
})
const dangAnFormJson = JSON.stringify(dangAnForm)
const bingshiFormJson = JSON.stringify(bingshiForm)
const addFd = () => {
  dangAnForm.wj.fudao_kewai.push({zhouji: '', shangke: '', shijian: ''})
}
const removeFd = (index) => {
  dangAnForm.wj.fudao_kewai.splice(index, 1)
}

const getAllData = (user_id) => {
  loading.value = true
  axios.get(baseUrl + '/api/getAllData?user_id=' + user_id).then((res) => {
    listBingshi.value = res.data.user.bingshis
    if(listBingshi.value.length>0) {
      for(var i in listBingshi.value[0]) {
        var item = listBingshi.value[0][i]
        if(item)bingshiForm[i] = item
      }
    }else{
      ruleBingshiFormRef.value.resetFields()
      bingshiForm.user_id = res.data.user.id
    }

    listDangan.value = res.data.user.dangans
    if(listDangan.value.length>0) {
      for(var i in listDangan.value[0]) {
        var item = listDangan.value[0][i]
        if(item)dangAnForm[i] = item
      }
      let arr = dangAnForm['yanzhu_left'].split('.')
      let arr1 = dangAnForm['yanzhu_right'].split('.')
      dangAnForm['yanzhu_left'] = arr[0]
      dangAnForm['yanzhu_left_100'] = arr[1]
      dangAnForm['yanzhu_right'] = arr1[0]
      dangAnForm['yanzhu_right_100'] = arr1[1]
    }else{
      resetDanganForm()
      dangAnForm.user_id = res.data.user.id
    }
    loading.value = false
    chartShow('屈光度变化情况表', 1)
    chartShow('裸眼视力变化', 2)
    chartShow('眼轴变化表', 3)
    
  })
}
const chart = reactive({
  chart1: null,
  chart2: null,
  chart3: null
})
const chartShow = (title, type) => {
  let optionsTemp = JSON.parse(options)
  if(type == 1) {
    optionsTemp.series = [
      {
        name: '右眼-DS',
        data: listDangan.value.map(function (item) { return item.yanguang_diannao_right.ds })
      },
      {
        name: '右眼-DC',
        data: listDangan.value.map(function (item) { return item.yanguang_diannao_right.dc })
      },
      {
        name: '右眼-A',
        data: listDangan.value.map(function (item) { return item.yanguang_diannao_right.a })
      },
      {
        name: '左眼-DS',
        data: listDangan.value.map(function (item) { return item.yanguang_diannao_left.ds })
      },
      {
        name: '左眼-DC',
        data: listDangan.value.map(function (item) { return item.yanguang_diannao_left.dc })
      },
      {
        name: '左眼-A',
        data: listDangan.value.map(function (item) { return item.yanguang_diannao_left.a })
      }
    ]
  }else if(type ==2) {
    optionsTemp.series = [
      {
        name: '右眼',
        data: listDangan.value.map(function (item) { return item.shili_luoyan_right })
      },
      {
        name: '左眼',
        data: listDangan.value.map(function (item) { return item.shili_luoyan_left })
      }
    ]
  }else if(type ==3) {
    optionsTemp.series = [
      {
        name: '右眼',
        data: listDangan.value.map(function (item) { return item.yanzhu_right })
      },
      {
        name: '左眼',
        data: listDangan.value.map(function (item) { return item.yanzhu_left })
      }
    ]
  }
  
  console.log(optionsTemp)
  optionsTemp.title.text = title
  optionsTemp.xaxis.categories = listDangan.value.map(function (item) { return item.write_date })
  if(chart['chart' + type]) chart['chart' + type].destroy()
  chart['chart' + type] = new ApexCharts(document.querySelector("#chart" + type), optionsTemp);
  chart['chart' + type].render();  
}

const saveBingshi = (formEl) => {
  if(!form.id) {
    return ElMessage({
            type: 'error',
            message: '保存失败, 请先创建用户'
    })
  }
  if (!formEl) return false
  formEl.validate((valid, fields) => {
    if (valid) {
      bingshiForm.user_id = form.id
      axios.post(baseUrl + '/api/saveBingshi', bingshiForm).then((res) => {
        if(res.data.code == 1){
          ElMessage({
            type: 'success',
            message: '保存成功'
          })
          getAllData(form.user_id)
        }else{
          ElMessage({
            type: 'error',
            message: '保存失败'
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const showBingshi = (index) => {
  for(var i in listBingshi.value[index]) {
    var item = listBingshi.value[index][i]
    if(item)bingshiForm[i] = item
  }
  bingshiActiveName.value = 'first'
  

}
const showDangan = (index) => {
for(var i in listDangan.value[index]) {
    var item = listDangan.value[index][i]
    if(item)dangAnForm[i] = item
  }
  danganActiveName.value = 'first'
  let arr = dangAnForm['yanzhu_left'].split('.')
  let arr1 = dangAnForm['yanzhu_right'].split('.')
  dangAnForm['yanzhu_left'] = arr[0]
  dangAnForm['yanzhu_left_100'] = arr[1]
  dangAnForm['yanzhu_right'] = arr1[0]
  dangAnForm['yanzhu_right_100'] = arr1[1]
}
const reset = () => {
  resetDanganForm()
  resetBingshiForm()
  resetForm()
  keyword.value = ''
  listBingshi.value = []
  listDangan.value = []
}
const resetDanganForm = () => {
  ruleDanganFormRef.value.resetFields()
  let dangAnFormTemp = JSON.parse(dangAnFormJson)
  for(var i in dangAnFormTemp) {
    dangAnForm[i] = dangAnFormTemp[i]
  }
}
const resetBingshiForm = () => {
  ruleBingshiFormRef.value.resetFields()
  let bingshiFromTemp = JSON.parse(bingshiFormJson)
  for(var i in bingshiFromTemp) {
    bingshiForm[i] = bingshiForm[i]
  }
}
const resetForm = () => {
  ruleUserFormRef.value.resetFields()
  let userFormTemp = JSON.parse(formJson)
  for(var i in userFormTemp) {
    form[i] = userFormTemp[i]
  }
}


const saveDangan = (formEl, type) => {
  if(!form.id) {
    return ElMessage({
            type: 'error',
            message: '保存失败, 请先创建用户'
    })
  }
  if (!formEl) return false
  formEl.validate((valid, fields) => {
    if (valid) {
      dangAnForm.type = type
      dangAnForm.user_id = form.id
      axios.post(baseUrl + '/api/saveDangan', dangAnForm).then((res) => {
        if(res.data.code == 1){
          ElMessage({
            type: 'success',
            message: '保存成功'
          })
          getAllData(form.id)
        }else{
          ElMessage({
            type: 'error',
            message: '保存失败'
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

var options = JSON.stringify({
          series: [{
            name: "右眼",
            data: []
        }, {
            name: "左眼",
            data: []
        }],
          chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        title: {
          text: '屈光度情况变化',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: [],
        }
});



		//var chart1 = new ApexCharts(document.querySelector("#chart1"), options);
		//var chart2 = new ApexCharts(document.querySelector("#chart2"), options);
        
    //chart1.render();      
    //chart2.render();      
const currentUser = reactive(@json(\App\Models\User::find(request()->get('user_id', 0))))
const App = {
	setup() {
  	if(currentUser && currentUser.id) selectUser(currentUser)
    return {
        keyword, form, listBingshi, listDangan, optionsUsers, optionsLoading, userRules, ruleUserFormRef, danganActiveName, dangAnForm, ruleBingshiFormRef, ruleDanganFormRef, bingshiForm, bingshiActiveName,
        getUsers, selectUser, saveUser, addFd, removeFd, saveBingshi, reset, showBingshi, saveDangan, showDangan, loading, currentUser,
        dangAnOptions, bingshiOptions, wenjuanOptions,
    }
  }
};
const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
    </body>
</html>